<template>
  <baseCard
    :height="applicationHight"
    title="高频问题应用"
    :contentStyle="contentStyle"
    style="margin-right: 0; margin-left: 0; margin-bottom: 0.2rem"
  >
    <arco-table
      :data="applicationData"
      :columns="columns"
      :pagination="false"
      :scrollbar="true"
      :scroll="scroll"
      :hoverable="true"
    >
      <template #czl="{ record }"
        ><span>{{ addThousandsSeparator(record.czl) }}</span></template
      >
      <template #yhtyl="{ record }"
        ><span>{{ addThousandsSeparator(record.yhtyl) }}</span></template
      >
      <template #qxl="{ record }"
        ><span>{{ addThousandsSeparator(record.qxl) }}</span></template
      >
      <template #sjl="{ record }"
        ><span>{{ addThousandsSeparator(record.sjl) }}</span></template
      >
      <template #quanxian="{ record }"
        ><span>{{ addThousandsSeparator(record.quanxian) }}</span></template
      >
      <template #pzl="{ record }"
        ><span>{{ addThousandsSeparator(record.pzl) }}</span></template
      >
      <template #hjl="{ record }"
        ><span>{{ addThousandsSeparator(record.hjl) }}</span></template
      >
      <template #ywzx="{ record }"
        ><span>{{ addThousandsSeparator(record.ywzx) }}</span></template
      >
      <template #wxzx="{ record }"
        ><span>{{ addThousandsSeparator(record.wxzx) }}</span></template
      >
    </arco-table>
  </baseCard>
</template>

<script setup>
import BaseCard from "@/components/vpt-cards-1001/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  defaultValue: { type: String },
  options: {
    typeof: Array,
    default: () => [],
  },
  baseInfo: { type: Object, default: () => ({}) },
  deviceNum: { type: Object, default: () => ({}) },
  applicationHight: { type: String, default: "10.3rem" },
  applicationData: { type: Array, default: [] },
});

const contentStyle = {
  paddingTop: 0,
};
const scroll = {
  y: "100%",
};
const columns = [
  {
    title: "应用名称",
    ellipsis: true,
    tooltip: true,
    dataIndex: "systemcontent",
    width: 120,
    align: "left",
  },
  {
    title: "操作类",
    ellipsis: true,
    tooltip: true,
    dataIndex: "czl",
    slotName: "czl",
    align: "right",
  },
  {
    title: "用户体验类",
    ellipsis: true,
    tooltip: true,
    dataIndex: "yhtyl",
    slotName: "yhtyl",
    align: "right",
    width: 120,
  },
  {
    title: "缺陷类",
    ellipsis: true,
    tooltip: true,
    dataIndex: "qxl",
    slotName: "qxl",
    align: "right",
  },
  {
    title: "数据类",
    ellipsis: true,
    tooltip: true,
    dataIndex: "sjl",
    slotName: "sjl",
    align: "right",
  },
  {
    title: "权限类",
    ellipsis: true,
    tooltip: true,
    dataIndex: "quanxian",
    slotName: "quanxian",
    align: "right",
  },
  {
    title: "配置类",
    ellipsis: true,
    tooltip: true,
    dataIndex: "pzl",
    slotName: "pzl",
    align: "right",
  },
  {
    title: "环境类",
    ellipsis: true,
    tooltip: true,
    dataIndex: "hjl",
    slotName: "hjl",
    align: "right",
  },
  {
    title: "业务咨询",
    ellipsis: true,
    tooltip: true,
    dataIndex: "ywzx",
    slotName: "ywzx",
    align: "right",
  },
  {
    title: "无效咨询",
    ellipsis: true,
    tooltip: true,
    dataIndex: "wxzx",
    slotName: "wxzx",
    align: "right",
  },
];
</script>

<style lang="less" scoped>
@import url("../../../../assets/style/table.less");
:deep(.arco-table-cell.arco-table-cell-align-left) {
  justify-content: center !important;
}
:deep(.arco-table-cell.arco-table-cell-align-right) {
  justify-content: center !important;
}
.sm-data-echarts-layout {
  width: 100%;
  height: 100%;
}
</style>
